<template>
  <div
    class="h-140px p-14px border-1px border-#efeff5 dark:border-#ffffff17 rounded-4px hover:shadow-sm cursor-pointer"
    @click="handleOpenSite"
  >
    <header class="flex-y-center">
      <svg-icon :icon="description" class="text-30px" />
      <h3 class="pl-12px text-28px font-semibold">{{ caption }}</h3>
    </header>
    <p class="py-8px h-56px text-#999">{{ caption }}</p>
    <div class="flex justify-end">
      <span class="text-#B8B8B8">{{ formName }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { router } from '@/router';
defineOptions({ name: 'DashboardWorkbenchMainTechnologyCard' });

interface Props {
  menuname: string;
  caption: string;
  description: string;
  supermenuname: string;
  formName: string;
}

const props = defineProps<Props>();

function handleOpenSite() {
  router.push(props.formName);
}
</script>

<style scoped></style>
